<template>
    <canvas id="canvas"></canvas>
</template>

<script setup lang="ts">
  import {onMounted} from "vue";
  import RenderContext from "@/views/cg/lib/RenderContext.ts";
  import {Model, shape, matrix } from '../lib'
  import gui from "@/views/cg/lib/gui";
  onMounted(()=>{

    let gl = RenderContext.getGL()
    const mesh = shape.d3_cube(100)
    const model = new Model(mesh)

    // 控制面板
    let controle = {
      zNear:1.0, // 近剪裁面
      zFar:100.0, // 远剪裁面
      fov:Math.PI*0.6, // 视场度
      zPos:3 // 所有的点在Z方向都平移3个单位
    }

    gui.add(controle, 'zNear').min(-10).max(20).name('zNear值').onChange((value)=>{
      console.log('value值变化zNear',value)
    })

    gui.add(controle, 'zFar').min(10).max(1000).name('zFar值').onChange((value)=>{
      console.log('value值变化zFar',value)
    })

    gui.add(controle, 'fov').min(0).max(Math.PI).name('fov值').onChange((value)=>{
      console.log('value值变化fov',value)
    })

    gui.add(controle, 'zPos').min(1).max(10).name('zPos值').onChange((value)=>{
      console.log('value值变化zPos',value)
    })

    let angle = 0.0
    const aspect = gl.canvas.width/gl.canvas.height;
    function draw() {
      const rotateYMatrix = matrix.rotateY(angle)
      const rotateZMatrix = matrix.rotateZ(angle)
      model.setMatrixUniform('u_rotatey', rotateYMatrix)
      model.setMatrixUniform('u_rotatez', rotateZMatrix)
      model.setMatrixUniform('u_project',
        matrix.perspective(controle.fov, aspect, controle.zNear, controle.zFar)
      )
      model.setMatrixUniform('u_zpos',[0, 0, controle.zPos])
      // model.setMatrixUniform('u_view', [
      //   1,0,0,0,
      //   0,1,0,0,
      //   0,0,1,0,
      //   0,0,-3,1
      // ])

      model.draw()
      angle += 0.01
      requestAnimationFrame(draw)
    }
    draw()
  })
</script>

<style scoped lang="scss">
#canvas{
  width: 100%;
  height: 100%;
  display: block;
}
</style>
